<template>
  <h1>图标数据</h1>
  <div class="box">
  <div id="box" style="width: 600px; height: 400px"></div>
  <div id="box2" style="width: 600px; height: 400px"></div>
</div>
</template>

<script setup lang="ts">
import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { CandlestickChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { onMounted, ref, reactive } from "vue";
import { EChartsOption, init } from "echarts";
import service from "../../../utlis/service";
echarts.use([GridComponent, CandlestickChart, CanvasRenderer]);
onMounted(() => {
  const chartEle: HTMLElement = document.getElementById("box") as HTMLElement;
  const chart = init(chartEle);
  
 
let x:any=[],val:any=[]
let ele:any=reactive([])
  service({
    url: "/data/simpleData",
  }).then((res) => {
    if (res.data.code === "200") {
      let arr=res.data.data
    arr.forEach((ele: { x: any; val: any; }) => {
         x.push(ele.x)
       val.push(ele.val)
      
       
      })
    }
  }
  )
 .then(()=>{
        const option: EChartsOption = {
    xAxis: {
      type: "category",
      data:  x,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: val,
        type: "bar",
      },
    ],
  };
  option && chart.setOption(option);
});
//let chartDom = document.getElementById("box2");
  
  const box2: HTMLElement = document.getElementById("box2") as HTMLElement;
const myChart = echarts.init(box2);

  let bb: any = [];
  let option;

  service({
    url: "/data/kData",
  })
    .then((res) => {
      if (res.data.code === "200") {
        let arr = res.data.data;
        
      }
    })
    .then(() => {
      option = {
        xAxis: {
          data: ["2021-11-15", "2021-11-16", "2021-11-17", "2021-11-18"],
        },
        yAxis: {},
        series: [
          {
            type: "candlestick",
            data: [
              [20, 34, 10, 38],
              [40, 35, 30, 50],
              [31, 38, 33, 44],
              [38, 15, 5, 42],
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    });
})

</script>
<style scoped>
.box{
  display: flex;
  width: 100%;
  height: 100%;
  
}
</style>